<template>
  <h1>{{ xxx }}</h1>
  <button @click="btnClick">点击xxx++</button>
</template>
<script>
// ref 就是一个组合式API

import { reactive, ref } from 'vue'

export default {
  // 入口函数，组合api代码都要写到setup内
  // 执行时机：它在beforeCreate前执行,不能使用this
  // html中要用什么，它就要return 什么
  // reactive:定义响应式数据，传统定义的数据都是非响应式的
  /*
   reactive用法：
      1：导入  import {reactive} from 'vue'
      2:定义（在setup内定义）
        const 变量名=reactive({一定要是复杂数据类型，一般都是用对象})
        const user=reactive({age:18})
        它定义的变量就是响应式数据了
      3:访问 
        user.age  
   ref:
    vue2:获取组件实例对象，获取原生标签dom
    vue3:获取组件实例对象，获取原生标签dom,定义响应式数据
     1：导入  import {ref} from 'vue'
     2:定义（在setup内定义）
       const 变量名=ref(变量值)  值无限制
       const num=ref(0)
             num=ref(0)={value:0} 

             obj=ref({name:'张三'})={value:{name:'张三'}}

 
             
       vue2:Object.defineProperty
       vue3:Proxy / Object.defineProperty
     3:访问：
        js: num.value
        html:不需要写value,不写绝对正确，写了可能报错

  */

  setup () {
    // let xxx = reactive({ num: 0 })
    let xxx = ref(0)

    const btnClick = () => {
      xxx.value++
      console.log(xxx)
    }

    return { xxx, btnClick }
  }
}
</script>
